<template>
  <div id="app">
      <ul>
        <li v-for="(item,index) in navs" :key="index">{{item.title}}</li>
      </ul>
    头像预览：<img :src="showHead" width="100" height="100" alt=""><br>
    头像上传：<input type="file" @change="uploadHead($event)" /><br>
    <div class="progress-wrap">
        <div class="progress" :style="{width:progressVal+'%'}"></div>
    </div>
    <input type="text" placeholder="用户名" v-model="username" /><br>
    <input type="text" placeholder="密码" v-model="password" /><br>
    <button type="button" @click="doLogin()">登录</button>
  </div>
</template>

<script>
import axios from 'axios';
import {request} from './assets/js/utils/request';
export default {
  name: 'app',
  data(){
    return {
      navs:[],
      username:"",
      password:"",
      showHead:"",
      progressVal:0
    }
  },
  components: {
  },
  created(){

    request("http://vueshop.glbuys.com/api/home/index/nav?token=1ec949a15fb709370f","get").then(res=>{
        // console.log(res);
        if (res.code===200){
            this.navs=res.data;
        }
    });

  },
  methods:{
    doLogin(){
      if (this.username.match(/^\s*$/)){
        alert("请输入用户名");
        return;
      }
      if (this.password.match(/^\s*$/)){
        alert("请输入密码");
        return;
      }

        request("http://vueshop.glbuys.com/api/home/user/pwdlogin?token=1ec949a15fb709370f","post",
        {cellphone:this.username,password:this.password}).then(res=>{
            console.log(res);
        });
    },
    //头像上传
    uploadHead(e){
      var config = {
        onUploadProgress: (progressEvent)=> {
          var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
          // console.log(percentCompleted);
          this.progressVal=percentCompleted;
        }
      };
        request(process.env.VUE_APP_API+"/user/myinfo/formdatahead?token="+process.env.VUE_APP_TOKEN,"file",
        {headfile:e.target.files[0]},config).then(res=>{
            console.log(res);
            if (res.code===200){
                this.showHead="http://vueshop.glbuys.com/userfiles/head/"+res.data.msbox
              }
        });
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
  .progress-wrap{width:300px;height:25px; border:1px solid #CCCCCC}
  .progress-wrap .progress{width:0%;height:100%;background-color:#0000FF}
</style>
